<template>
	<view class="container">
		<nav-top :title="navTitle" :type="navType" />
		<view class="comment-list">
			<view class="comment-item" v-for="item in listData" :key="item.id">
				<view class="date-score">
					<text>{{item.createTime}}</text>
					<view class="stars">
						<image class="stars-image" v-for="(i,index) in item.allRate" :key="index" src="@/static/images/home/star@2x.png"></image>
					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
				
				<view class="line"></view>
				
				<view class="store">
					<view class="">
						<image class="logo" src="@/static/images/home/storeShow@2x.png" mode=""></image>
					</view>
					<view class="store-info">
						<text class="store-name">{{item.shopName}}</text>
						<text class="order-content">单人套餐</text>
					</view>
					<view class="to-see" @click="toStore(item.id)">
						<text class="desc">去看看</text>
						<image class="arrow" src="@/static/images/my/arrow@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import request from "@/Api/request.js"
	import {
		reactive
	} from "vue";
	const navTitle = "我的评价"
	const navType = "commen"
	let listData = reactive([])
	onLoad(() => {
		request({
			url: "/comment",
			method: "GET"
		}).then((res) => {
			for (let item of res) {
				listData.push(item)
			}
			console.log(listData);
		})
	})
	function toStore(id){
		uni.navigateTo({
			url:`/pages/Home/Store/Store?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/commen.scss";
	.comment-list{
		display: flex;
		flex-direction: column;
		gap:24rpx;
		padding: 24rpx 0;
		.comment-item{
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			padding: 24rpx 32rpx;
			.date-score{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.stars{
					display: flex;
					gap:4rpx;
					.stars-image{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
			
			.content{
				margin-top: 24rpx;
				@include font-base(28rpx,#333333,400)
			}
			
			.line{
				width: 100%;
				height: 1rpx;
				background: #E6E6E6;
				margin: 32rpx 0;
			}
			
			.store{
				display: flex;
				position: relative;
				align-items: center;
				.logo{
					width: 72rpx;
					height: 72rpx;
				}
				
				.store-info{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 16rpx;
					.store-name{
						@include font-base(24rpx,#333333,500);
					}
					
					.order-content{
						@include font-base(20rpx,#999999,400);
					}
				}
				
				.to-see{
					position: absolute;
					right: 0;
					.desc{
						@include font-base(20rpx,#999999,400);
					}
					.arrow{
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}
	}
</style>